<template>
  <div>
    <van-search
      v-model="value"
      @input="inp"
      @search="onSearch"
      placeholder="请输入搜索关键词"
    />
   <van-cell-group v-if="isShow">
      <van-cell v-for="(item, index) in showList" :key="index" :title="item" />
    </van-cell-group>
        <h5 class="w1">历史记录：</h5>
    <van-button class="w1" type="primary" @click="del" size="mini"
      >删除</van-button
    >
    <van-tag
      color="red"
      v-for="(item, index) in history"
      :key="index"
      v-show="index < 3"
      class="w1"
      plain
      >{{ item }}</van-tag
    >
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      value: "",
      isShow: false,
      history: JSON.parse(localStorage.getItem("history")) || [],
    };
  },
  methods: {
    onSearch() {
      this.history.unshift(this.value);
      localStorage.setItem("history", JSON.stringify(this.history));
        this.$router.push({ path: "/About", query: { value: this.value } });
    },
    inp() {
      var list = this.$store.state.list;
      this.showList = list.filter((item) => {
        return item.includes(this.value);
      });
    },
        del() {
      Dialog.confirm({
        message: "确定删除吗？",
      })
        .then(() => {
          this.history = [];
          localStorage.removeItem("history");
        })
        .catch(() => {});
    },
  },
  watch: {
    value(val) {
      if (val.length > 0) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
  },
};
</script>
<style scoped>
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
#q1 {
  width: 100%;
  height: 500px;
}
.w1 {
  padding: 5px;
  margin-left: 10px;
}
</style>